import React, { useState, createContext, useContext } from "react"

// 创建一个 Context，并提供默认值以解决类型问题
// createContext 创建一个上下文对象，用于在组件树中共享数据
const MyContext = createContext<{
  sharedData: string
  updateData: () => void
}>({
  sharedData: "",
  updateData: () => {},
})

// 父组件 - 负责管理状态并通过Context提供给子组件
function Parent() {
  // useState钩子创建一个状态变量和更新函数
  // sharedData: 存储要共享的数据
  // setSharedData: 用于更新共享数据的函数
  const [sharedData, setSharedData] = useState<string>("Hello from Context")

  // 定义更新数据的函数，将在子组件中调用
  const updateData = () => {
    setSharedData("Updated Data from Context")
  }

  return (
    // MyContext.Provider 将数据和函数传递给子组件树
    // value属性包含要共享的所有数据和函数
    <MyContext.Provider value={{ sharedData, updateData }}>
      <div className="parent-container">
        <h2>Parent Component</h2>
        <p>Current shared data: {sharedData}</p>

        <button onClick={() => setSharedData("我也可以一键更新所有数据")}>
          更新数据
        </button>

        <ChildA />
      </div>
    </MyContext.Provider>
  )
}

// 子组件 A - 作为中间组件，不直接使用Context数据，但传递给ChildB
function ChildA() {
  return (
    <div className="child-a-container">
      <h3>Child Component A</h3>
      <p>This component doesn't use the context directly</p>
      <ChildB />
    </div>
  )
}

// 子组件 B - 使用useContext钩子访问Context中的数据和函数
function ChildB() {
  // useContext钩子从MyContext中提取共享数据和更新函数
  // 解构赋值获取sharedData和updateData
  const { sharedData, updateData } = useContext(MyContext)

  return (
    <div className="child-b-container">
      <h3>Child Component B</h3>
      <div>
        Received data: <strong>{sharedData}</strong>
      </div>
      <button onClick={updateData} className="update-button">
        Update Data
      </button>
    </div>
  )
}

export default Parent
